<template>
  <div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 70%; margin: 0px auto"
    >
      <el-table-column prop="bid" label="床位ID" width="120"></el-table-column>
      <el-table-column
        prop="bed.bnum"
        label="床位编号"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="onum"
        label="订单编号"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="orderTime"
        label="下单时间"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="actualpay"
        label="支付金额"
        width="auto"
      ></el-table-column>
      <el-table-column label="使用状态" width="auto">
        <template slot-scope="scope">
          <label v-if="scope.row.orderstatus == 0">进行中</label>
          <label v-if="scope.row.orderstatus == 1">待付款</label>
          <label v-if="scope.row.orderstatus == 2">已完成</label>
        </template>
      </el-table-column>

      <!--操作列-->
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="paymoney(scope.row)"
            v-if="scope.row.orderstatus == 1"
            >去付款</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="guihuan1(scope.row)"
            v-if="scope.row.orderstatus == 0"
            >归还</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { tozhifubao, loginOrder, guihuan, payReturn } from "@/api/Order.js";
export default {
  data() {
    return {
      pageInfo: {
        pageSize: 5,
        pageNum: 1,
        list: [],
        bed: [],
      },
      actualpay: 0,
    };
  },
  mounted() {
    this.loadMyOrder();
    this.returnPay();
  },
  methods: {
    guihuan1(row) {
      guihuan(row.oid).then((res) => {
        if (res.data.code == 200) {
          this.loadMyOrder();
          this.$message.success("归还成功,请付款！！！");
        }
      });
    },
    //开始就加载所有的医院和科室
    loadMyOrder() {
      loginOrder(this.pageInfo).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
        }
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.loadMyOrder();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.loadMyOrder();
    },
    paymoney(row) {
      tozhifubao(
        "outTradeNo=" +
          row.onum +
          "&subject=" +
          "测试订单" +
          "&totalAmount=" +
          row.actualpay +
          "&body=" +
          row.bed.bnum
      ).then((res) => {
        const divForm = document.getElementsByClassName("punchout_form");
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        // const div = document.createElement("div");
        // div.innerHTML = res.data; // data就是接口返回的form 表单字符串
        // document.body.appendChild(div);
        // punchout_form.setAttribute("target", "_blank"); // 新开窗口跳转
        // punchout_form.submit();
        // console.log(response);
        const div = document.createElement("divform");
        div.innerHTML = res.data;
        document.body.appendChild(div);
        document.forms["punchout_form"].setAttribute("target", "_blank");
        document.forms["punchout_form"].submit();
      });
    },
    // returnPay(){
    //     let _this = this;
    //     if(this.$route.query&& this.$route.query.out_trade_no){
    //         //支持回调
    //         payReturn({onum:_this.$route.query.out_trade_no}).thren(res=>{
    //             if(res.data.code==200){
    //                 _this.$message.success("支付成功");
    //                 _this .$router.push("/MyOrder");
    //             }else{
    //                 _this.$message.error("支付失败");
    //             }
    //         });
    //     }
    // },
    returnPay() {
      if (this.$route.query && this.$route.query.out_trade_no) {
        //支持回调
        payReturn({ onum: _this.$route.query.out_trade_no }).thren((res) => {
          if (res.data.code == 200) {
            this.$message.success("支付成功");
            this.loadMyOrder();
            setTimeout(() => {
              window.close();
            }, 3000); // 延迟五秒执行
          } else {
            this.$message.error("支付失败");
          }
        });
      }
    },
  },
};
</script>